<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OpenVINO</title>
    <style>
        div {
            border: 0;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .root {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        .count {
            flex: 0 0 auto;
            font-size: 36px;
            color: black;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="root">
    <span id="l" class="count">进入: 0</span>
    <span id="r" class="count">离开: 0</span>
    <span id="n" class="count">人数: 0</span>
</div>
</body>
<script type="text/javascript">
    const L_counter = document.getElementById("l")
    const R_counter = document.getElementById("r")
    const N_counter = document.getElementById("n")
    let ln = 0;
    let rn = 0;
    const server = new WebSocket("ws://192.168.1.2:8080/counter")
    server.onopen = () => console.log("websocket connected")
    server.onerror = err => console.log("websocket failed: %o", err)
    server.onclose = () => console.log("websocket closed")
    server.onmessage = msg => {
        console.log("recv: %s", msg.data)
        let diff = parseInt(msg.data)
        if (diff > 0)
            ln += diff;
        if (diff < 0)
            rn -= diff;
        if (rn > ln)
            rn = ln;
        L_counter.innerText = `进入: ${ln}`
        R_counter.innerText = `离开: ${rn}`
        N_counter.innerText = `人数: ${ln - rn}`
    }
</script>
</html>